<template>
  <Tree class="tree-wrapper" :data="treeData" @on-select-change="select" @on-contextmenu="rightClick">
    <template #contextMenu v-if="menuEnable">
      <DropdownItem v-if="addEnable" @click.native="$emit('add',current)">{{lang.add}}</DropdownItem>
      <Poptip
          v-if="!!current[nameId]&&current[nameId]!=rootId&&removeEnable"
          confirm
          transfer
          :title="lang.popTitle"
          @on-ok="$emit('remove',current)">
        <DropdownItem style="color: #ed4014">{{ lang.delete }}</DropdownItem>
      </Poptip>
      <slot name="menu" v-if="rootId !=current[nameId]">
        <DropdownItem v-for="(item,i) in menus" :key="i" v-if="!item.disabled" :style="item.menuStyle" v-bind="item" @click.native="$emit('menu',item,current)">{{item.title}}</DropdownItem>
      </slot>
    </template>
  </Tree>

</template>

<script>
import * as _ from 'lodash';
export default {
  name: "hierTree",
  data(){
    return {
      current:{},
      treeData:[]
    }
  },
  props:{
    title:{
      default:()=>{
        return 'title'
      }
    },
    rootId:{
      default:()=>{
        return 'root'
      }
    },
    nameId:{
      default:()=>{
        return 'id'
      }
    },
    namePid:{
      default:()=>{
        return 'parentId'
      }
    },
    nameTitle:{
      default:()=>{
        return 'title'
      }
    },
    rootEnable:{
      default:()=>{
        return true
      }
    },
    menuEnable:{
      default:()=>{
        return true
      }
    },
    addEnable:{
      default:()=>{
        return true
      }
    },
    removeEnable:{
      default:()=>{
        return true
      }
    },
    menus:{
      default:()=>{
        return []
      }
    },
    rootRender:{
      default:()=>{
        return null
      }
    },
    childrenRender:{
      default:()=>{
        return null
      }
    },
    data:{
      default:()=>{
        return []
      }
    }
  },
  computed:{
    lang(){
      return {
        'en-US':{
          add:'add',
          delete:'delete',
          popTitle:'delete confirm?'
        },
        'zh-CN':{
          add:'添加',
          delete:'删除',
          popTitle:'确认删除吗?'
        }
      }[this.G_Locale]
    },
    // treeData(){
    //   if(this.rootEnable){
    //     return [
    //       {
    //         title: this.title,
    //         id:this.rootId,
    //         expand: true,
    //         contextmenu:true,
    //         data:{id:this.rootId,title:this.title},
    //         children: this.getChildren(this.rootId)
    //       }
    //     ]
    //   }else{
    //     return this.getChildren(this.rootId)
    //   }
    // }
  },
  mounted(){
    this.treeData=this.setTreeData();
    this.$nextTick(()=>{
      this.$emit('onload',this)
    })
  },
  watch:{
    data:{
      handler(newValue,oldValue){
        this.treeData=this.setTreeData();
      },
      deep:true
    }
  },
  methods:{
    setTreeData(){
      if(this.rootEnable){
        let root =[
          {
            title: this.title,
            id:this.rootId,
            expand: true,
            contextmenu:true,
            data:{id:this.rootId,title:this.title},
            children: this.getChildren(this.rootId)
          }
        ]
        if(this.rootRender){
          root[0].render = this.rootRender;
        }
        return root;
      }else{
        return this.getChildren(this.rootId)
      }
    },
    getChildren(parentId){
      let children=[];
      let list=this.data.filter(item=>item[this.namePid]==parentId);
      list.map(item=>{
        if(item.show!=false){
          let child = {
            title:item[this.nameTitle],
            id:item[this.nameId],
            parentId:item[this.namePid],
            contextmenu:true,
            expand: true,
            data:item,
            children:this.getChildren(item[this.nameId])
          }
          if(item.render){
            child.render = item.render;
          }else if(this.childrenRender){
            child.render = this.childrenRender;
          }
          children.push(child)
        }
      });
      return children;
    },
    selectItem(id){
      let fn=(id,data,parentItem)=>{
        data[0].children.map(item=>{
          if(item[this.nameId]==id){
            parentItem['expand']=true;
            item.selected=true;
            this.select([item],item)
          }else if(item.children.length>0){
            fn(id,item.children,item);
          }
        })
      };
      fn(id,this.treeData,this.treeData[0])
    },
    select(data,item){
      this.current=item.data;
      this.$emit('select',this.current,data)
    },
    rightClick(item,e,position){
      this.current=item.data;
      this.setTree(tree=>{
        tree.handleSelect(item.nodeKey)
      })
      this.$emit('contextmenu',this.current,e,position)
    },
    remove(){
      
    },
    setTree(fn){
      fn(this.$children[0])
    },
    handleSelect(nodeKey){
      this.setTree(tree=>{
        tree.handleSelect(nodeKey)
      })
    },
    getTreeData(){
      return this.treeData
    },
    getTree(){
      return this.$children[0]
    },
    findTreeNode(key,value){
      let res = null;
      return this._findTreeNode(this.treeData,key,value,res)
    },
    _findTreeNode(items,key,value,res = null){
      for(let i=0;i<items.length;i++){
        if(_.get(items[i],key)===value){
          res = items[i];
          break;
        }else if(items[i].children&&items[i].children.length>0){
          res = this._findTreeNode(items[i].children,key,value,res)
        }
      }
      return res;
    },
  }
}
</script>

<style scoped lang="scss">
.tree-wrapper {
  ::v-deep .ivu-tree-title{
        width: 100%;
    }
}

</style>